<template>
    <div>
        <div class="title">
            <img style="margin-left: 20px;" src="@/assets/logo.png">
            <span>TPM设备管理系统</span>
            <router-link v-for="item in title" :class="$route.path == item.path ? 'active' : '' " :key="item.name"
                tag="div" :to="item.path">
                {{ item.name }}
            </router-link>
            <div id="user">
                <el-col :span="12">
                    <!-- <span class="demonstration">click 激活O(∩_∩)O哈哈~</span> -->
                    <el-dropdown trigger="click">

                        <span class="el-dropdown-link">
                            <div></div>
                            <div class="click-user">
                                <span class="user1">{{ user.name }}</span>
                                
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </div>

                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-plus">个人信息</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-plus">修改密码</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-plus-outline">
                                <span>
                                    <el-button type="text" @click="open">退出登录</el-button>
                                </span>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <span>
                                    <img
                                        src="https://cdn7.axureshop.com/demo2024/2268678/images/%E4%BB%AA%E8%A1%A8%E7%9B%98/u621.svg">
                                    &nbsp;&nbsp;&nbsp;系统版本 v1.03</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </div>
        </div>

        <div>
           <router-view></router-view> 
        </div>
        
    </div>
</template>

<script>
import { sysMenu, sysUserInfo } from '@/api/role';
export default {
    data() {
        return {
            user: {},
            title: []
        }
    },
    mounted(){
        let that = this;
        sysUserInfo().then(res=>{
            that.user = res.data.data;
        })
        sysMenu().then(res=>{
            that.title = res.data.data;
        })
    },
    methods: {
        // exit() {
        //     let that = this;
        //     that.$router.push({
        //         path: "/",
        //         name: "login",

        //     })
        // },
        open() {
            let that = this;
            that.$confirm('此操作将退出登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                localStorage.removeItem("token");
                that.$router.push({
                    path: "/",
                    name: "login"

                })
                that.$message({
                    type: 'success',
                    message: '退出登录成功!'
                });
            }).catch(() => {
                that.$message({
                    type: 'info',
                    message: '已取消退出'
                });
            });
        }
    }
}
</script>

<style scoped>
.title {
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 3px solid #f4f4f4;
    height: 5vh;
    box-sizing: border-box;
    line-height: 5vh;
    background-color: #c7d3d7;
}

.title>div {
    text-align: center;
    width: 115px;
}

.active {
    color: rgb(66, 72, 241);
    border-bottom: 1px solid blue;
}

.router-link-active {
    border-top: 2px solid rgb(219, 98, 98);
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;

}

.el-icon-arrow-down {
    font-size: 12px;
}

.demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
}


#user {
    width: 240px;
    position: relative;
    left: 540px;
}

#user>div {
    width: 40px;
    /* margin-right: 5px; */
    background-image: url("@/assets/logo.png");
    background-size: cover;
    border-radius: 50%;
    margin-top: 5px;
}

.click-user {
    width: 10vw;
    line-height: 40px;
    position: relative;
    margin-left: 5px;
    /* text-align: right; */
}
</style>